<template>
  <div class="main">
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item label="用户名" name="username" :rules="[]">
        <a-input v-model:value="form.username" />
      </a-form-item>
      <a-form-item label="密码" name="password" :rules="[]">
        <a-input v-model:value="form.password" type="password" />
      </a-form-item>
      <a-form-item label="确认密码" name="confirmPassword" :rules="[]">
        <a-input v-model:value="form.confirmPassword" type="password" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">注册</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { Form, Input, Button, message } from "ant-design-vue";
import { ref } from "vue";
import { regApi } from "../utils/api";
import { useRoute, useRouter } from "vue-router";

// 获取路由对象
const route = useRoute();
const router = useRouter();

const form = ref({
  username: "",
  password: "",
});

const handleSubmit = () => {
  // 判断两次密码是否一致
  if (form.value.password !== form.value.confirmPassword) {
    message.error("两次密码不一致");
    return;
  } else {
    regApi({
      username: form.value.username,
      password: form.value.password,
    }).then((res) => {
      if (res.code === 200) {
        message.success("注册成功");
        router.push("/login");
      } else {
        message.error("注册失败");
      }
    });
  }
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
